import React from 'react'

import constants from "../../utils/constants"
import {WhiteSpace, WingBlank} from "antd-mobile"
import './WithdrawCard.css'

const WithdrawCard = (props) => {
    const {
        data: {
            date,
            money,
            status,
            name,
            cardId,
            bank,
            subbranch,
            done,
            failedMsg,
        },
    } = props

    const timeTemplate = (
        <p className='withdraw-record-card-sub-text'>
            提现时间：{date}
        </p>
    )

    const failStyle = {
        color: `${constants.themeColor}`,
    }

    const MoneyTemplate = (
        <div className='withdraw-record-card-upper'>
            <div>
                <p className='withdraw-record-card-lg-text'>{money}</p>
                <p className='withdraw-record-card-sub-text'>兑换金额</p>
            </div>
            <div>
                <p
                    className='withdraw-record-card-lg-text'
                    style={done ? null : failStyle}
                >{status}</p>
                <p className='withdraw-record-card-sub-text'>交易状态</p>
            </div>
        </div>
    )

    const nameTemplate = (
        <div className='withdraw-record-card-lower'>
            <div className='withdraw-record-card-sub-text'>姓名：</div>
            <div>{name}</div>
        </div>
    )

    const cardIdTemplate = (
        <div className='withdraw-record-card-lower'>
            <p className='withdraw-record-card-sub-text'>卡号：</p>
            <p>{cardId}</p>
        </div>
    )

    const bankTemplate = (
        <div className='withdraw-record-card-lower'>
            <p className='withdraw-record-card-sub-text'>银行名称：</p>
            <p>{bank}</p>
        </div>
    )
    const subbranchTemplate = (
        <div className='withdraw-record-card-lower'>
            <div className='withdraw-record-card-sub-text'>支行名称：</div>
            <p>{subbranch}</p>
        </div>
    )

    const failedMsgTemplate = (
        <div className='withdraw-record-card-failed'>
            <div className='withdraw-record-card-failed-exc'>!</div>
            <span>{failedMsg}</span>
        </div>
    )

    return (
        <WingBlank>
            <WhiteSpace/>
            <div className='withdraw-record-card'>
                <WingBlank>
                    {timeTemplate}
                    {MoneyTemplate}
                    {nameTemplate}
                    {cardIdTemplate}
                    {bankTemplate}
                    {subbranchTemplate}
                </WingBlank>
                {failedMsg ? failedMsgTemplate : null}
            </div>
            <WhiteSpace/>
        </WingBlank>
    )
}

export default WithdrawCard



